約 2,199,540 件
https://w.atwiki.jp/threejs/pages/23.html
更新日：2013-04-20, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.CircleGeometry ( radius, segments, thetaStart, thetaLength ) 円のジオメトリを作る。 パラメータ radius float [= 50] |半径。 segments int [= 8] |thetaLengthで設定した角度をこの数で分割する。円と言っているが3DCGでは実際のところ多角形である。thetaLengthが2π(360度まるまる)のとき、segments=6だと正6角形、segments=8だと正8角形になる。増やすにつれ真の円に近付く。 thetaStart float [= 0] |開始角度。単位はラジアン。+X方向が0度、+Y方向が90度。 thetaLength float [= 2π] |中心角。単位はラジアン。(2πでも円周の始点と終点はくっつかない。) 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var circleGeo = new THREE.CircleGeometry(10, 16), // 半径10、正16角形 var greenMaterial = new THREE.MeshLambertMaterial( { color 0x00ff00 } ); var circle = new THREE.Mesh( circleGeo, greenMaterial ); scene.add( circle ); // circle.geometry.computeVertexNormals(); // r57以前でのバグ対策。r58以降は不要。 etc 何も設定しないとオモテ面だけなので裏返ると全く見えなくなる（上の表示例ではワイヤーフレームも一緒に出してるので見えるが）。 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 前述したように正多角形もこのジオメトリで作れる。 普通に正5角形とか作ると+X向きになるので、この時点で90度回して頂点位置を書き変えておくと後々便利かもしれない（それに従って+Y方向が0度になる）。 var regularPolygon = new THREE.Mesh( new THREE.CircleGeometry(10,5), new THREE.MeshLambertMaterial( { color 0x00ff00 } ) ); scene.add( regularPolygon ); for(var i=1, len = regularPolygon.geometry.vertices.length; i len; i++){ regularPolygon.geometry.vertices[i].applyAxisAngle({x 0, y 0, z 1}, Math.PI/2); // Z軸で90度回転 } // polygon.geometry.computeVertexNormals(); // r57以前でのバグ対策。r58以降は不要。
https://w.atwiki.jp/threejs/pages/65.html
更新日：2013-04-22, r58 （モデルデータ：Lowpoly building LPBldX... TurboSquid） 向こう側の壁とか抜けて見えるのは仕様。両面化してない。 script type="text/javascript" src="ColladaLoader.js" /script ColladaLoader.jsを読み込んでおく。three.jsを読んだ後で。 three.jsセットの examples/js/loaders/ にある。 var house; var loader = new THREE.ColladaLoader(); // loader.options.convertUpAxis = true; // 向きが狂ったら loader.load( house.dae , function( collada ) { // 読み込み完了時のコールバック関数 house = collada.scene; scene.add( house ); renderer.render( scene, camera ); } );
https://w.atwiki.jp/cscd/pages/239.html
マニュアル three.js - documentation 公式のマニュアル。構造体とか全部載ってる、はず。 Three.js doc Three.jsをダウンロードするとついてくるexmaplesのソースと実際どう動くのかが見れて便利。 入門的な Getting Started with Three.js | Aerotwist 公式。 多彩な表現力のWebGLを扱いやすくする「Three.js」（1/5）- ＠IT @ITの特集。 THREE.js で WebGL | ヨモツネット JavaScript 3DレンダリングエンジンのThree.jsを試す | KRAY Inc Three.jsのTIPS - 世界創造ツール開発Blog 3D Tetris with Three.js tutorial – part 1 Smashinglabs テトリスをつくりながら学ぶらしい。 Three.js - examples 名前 コメント すべてのコメントを見る
https://w.atwiki.jp/threejs/pages/101.html
更新日：2013-05-06, r58 （モデルデータ：Elementalist Warrior female character ARTIST-3D.COM から拝借、改変） モデルが500KB、テクスチャが400KBあるので読み込みに時間がかかるかもしれない。 左ドラッグ、右ドラッグ、マウスホイールドラッグ上下で視点動かせる。 script src="MTLLoader.js" /script script src="OBJMTLLoader.js" /script MTLLoaderとOBJMTLLoader.jsを読み込んでおく。three.jsを読んだ後で。 three.jsセットの examples/js/loaders/ にある。 mtlフォーマットの詳細 MTL OBJ materials file var OBJMtl; var loader = new THREE.OBJMTLLoader(); // load完了時の動作 loader.addEventListener( load , function ( res ) { OBJMtl = res.content; scene.add( OBJMtl ); renderer.render( scene, camera ); }); // 読み込み開始。第1引数にOBJのURL、第2引数にmtlのURL loader.load( wor.obj , wor.mtl );
https://w.atwiki.jp/threejs/pages/95.html
更新日：2013-05-04, r58 SonyのBRAVIAのアレ。 cannon.jsとパーティクル。 (1) THREE.ParticleSystemのvertices変更、(2) THREE.Spriteのposition変更 + THREE.Object3Dでグループ、(3) 平面Meshのposition変更 + THREE.Object3Dでグループ、を比較したところ、パーティクルが一番速かった。 テクスチャをCanvasで描くのと画像読み込みで速さに差はなかった。
https://w.atwiki.jp/threejs/pages/31.html
更新日：2013-04-21, r58 (わかりやすくするためにワイヤーフレームも一緒に表示している。) 説明 THREE.TorusGeometry ( radius, tube, radialSegments, tubularSegments, arc ) トーラス（ドーナツ型）のジオメトリを作る。 パラメータ radius float [= 100] |ドーナツの芯円の半径。 tube float [= 40] |ドーナツの断面円の半径。 radialSegments int [= 8] |断面円の分割数。（変数名と意味が一致してないが、tubularSegmentsと逆に作っちゃったらしい。）3にするとUFOみたいな形に。 tubularSegments int [= 6] |芯の円の分割数。（変数名と意味が一致してないが、radialSegmentsと逆に作っちゃったらしい。） arc float [= 2π] |中心角。単位はラジアン。+X方向が0度、+Y方向が90度。 例 ジオメトリ作ってマテリアルと合わせてメッシュにしてシーンに追加するまで。 var torus = new THREE.Mesh( new THREE.TorusGeometry(50, 10, 8, 16), // 芯円半径50、断面円半径10、断面円分割8、芯円分割16 new THREE.MeshLambertMaterial( { color 0x00ff00 } ) ); scene.add( torus );
https://w.atwiki.jp/threejs/pages/80.html
更新日：2013-04-24, r58 THREE.SpotLight ( hex, intensity, distance, angle, exponent ) hex 16進数 [= 0xffffff] |光の色。 intensity float [= 1] |光の強さ。 distance float [= 0] |0でない場合、遠くなるほど光の強さが線形で減衰していき、距離distanceでゼロになる。 angle float [= Math.PI / 3] |照らす範囲角の半分。単位はラジアン。Math.PI/2を越えないように。 exponent float [= 10] |指数関数的な減衰係数。多くすると中心から外側に向かってすぐ暗くなる。（たぶん0以上。） var light = new THREE.SpotLight( 0xffffff, 5, 130, Math.PI/4, 1 ); // 白、強さ5、距離130まで減衰、範囲角90度、減衰指数1 light.target.position = new THREE.Vector3(0,10,-60); // 照らす標的の座標 light.position.set(0,50,0); scene.add( light );
https://w.atwiki.jp/storyteller/pages/1075.html
THREE part38-84～86 84 ：three 三つの記憶：2008/04/08(火) 05 47 45 ID 0s0GPXgTO リクにあったので…… 秀明は深夜のホテル街にいた。 手から滑り落ちるナイフ。崩れ落ちる恋人のミキ。 親友の隆志の怯えた視線とOLの悲鳴に秀明は逃げ出した。 何が起きたのか、事態を把握するため秀明は記憶を辿る。 1時間前―秀明はミキを探していた。 バイト先でホテル街に向かった事を聞いた秀明は後を追う。 そこで目にしたのは隆志に抱き寄せられるミキの姿だった。 裏切りの絶望にナイフを振り上げる秀明。 ……何故ナイフなんて持っているんだ? 2時間前―秀明は何故か傷だらけだった。 ミキの路上ライブの情報を得てそこへ向かうと、 そこには手品師がいてミキのおっかけと口論になっていた。 おっかけに圧されて手品師は居なくなる。 追いかければ返せる……秀明はとっさにそれを拾った。 (ロン毛からもナイフは拾える) おっかけにミキのバイト先を聞き、秀明はそこへ。 ……ナイフなんて拾わなければ……ミキを探していただけなのに。 ……何故、ミキを探していたんだ? 3時間前―宮下公園でミキをだきとめる隆志。 再び会う約束をして2人は別れる。 目前の光景に秀明は嫉妬心に包まれる。 が、思い直し2人を信じ話を聞く為後を追った。 ミキを探し輸入服店を訪ねると、店員に声をかけられる。 指摘されるまで気付かなかったⅢという左肩の刺青。 ……何でそんなものが 思考はミキのライブの話に遮られる。 ミキを追う秀明は、ドレッドに因縁をつけられる。 助けてくれたのは見知らぬ白人男性。 病院に行った方がいいと言う彼の言葉に、秀明は自分が病院にいた事を思い出した。 5時間前―気付くと真っ白い病室に寝かされていた。 サイドテーブルに置かれた診断は「短期記憶欠落症」 精神的なショックで3つ以上新しい記憶を持てないという。 リンと名乗る女医が現れ、問う「あなたは最後に何を見たの?」 続きます 85 ：ゲーム好き名無しさん：2008/04/08(火) 05 52 01 ID 0s0GPXgTO 10時間前―気がつくとそこは白い部屋だった。 リンにミキの父親の病院に運び込まれた事を知らされる。 病状の説明を受けているとミキと隆志が見舞いに来た。 花瓶が倒れて水を被り、ミキが、隆志が拭いてくれて、 家に連絡する事を言われた時、秀明の記憶は限界を超える。 状況が分からなくなった秀明を2人は苦しそうに見つめ、 ミキは謝罪を、隆志は励ましを残して去る。 時は経ち、再びリンが訪れ問いかける。 秀明は何も思い出せない。 リンからミキたちが着ていたことを告げられ部屋を飛び出す。 すれ違い様にリンは呟く「S-03……」 気がつくと、秀明はハチ公前にいた。 ポニーテールと話してミキを探していた事を思い出した秀明は、 心配する声を背にミキを追って公園通りへ向かう。 宮下公園で目にするのは裏切りの光景…… ……違う、そうじゃない！ 2人は自分の事を思ってくれていたことを思い出す。 病院に連れていってくれたのもそう……ミキだった。 27時間前―街を彷徨う秀明を見つけた隆志は慌てて電話をかける。 繋がら無い電話に駆け出した隆志を追う。 ミキに告白した時の事を思い出し、 隆志を見つけられないままミキのバイト先へと向かう。 連絡を受けたミキが秀明を見つけるが、そこで倒れ込んでしまう。 心配して声をかけてきた外国人に、ミキもかけつけた隆志も言葉を失う。 ミキが父親の病院に連れて行くと告げると、彼は意味深な言葉を残して去る。 病院に運ばれた秀明に、ミキの父親は困惑した。 保険が効かないと治療をしぶる父親にミキは叫ぶ。 「命がかかってるのに日本人かどうかなんて！」 現在―秀明は窓に映る自分と対峙する。 そこに居るのは金髪碧眼の外国人で。 明滅するイメージ。謎の施設とどこかの校舎。 欠落した記憶を求め、全てを終わらせてミキの後を追うために聞き回る。 謎の蒸発事件、近くにあるというSFS社の研究施設。 老人から得た戦犯の収容所の話。 女将からある小学校の地下では無いかと聞き秀明はそこへ向かう。 不自然に区切られた校舎を抜けると地下に鉄の扉をみつける。 瞬間、後頭部に走る衝撃。 薄れる意識に女性の声を聞く。 もいっちょ続きます 86 ：three 三つの記憶：2008/04/08(火) 06 03 26 ID 0s0GPXgTO ↑タイトル抜けた……すいませんorz 目を覚ますと機械に囲まれた部屋で寝かされていた。 声に目を向けると、それはいつかの白人だった。 秀明の問いかけに彼は自分は君だと答える。 ディッシュ。秀明の基となった人間。 思わず振り払った秀明をだきとめたのはリンだった。 彼女は秀明が13体のうち最後の1人だという。 蘇る記憶。秀明が最後に見たのは己の死体の山に立ちすくむ自分。 秀明の成果にリンは満足したようだ。 連れてこられるミキと隆志。 2人を前に秀明がクローンだと告げる。 (手品師のナイフでなければ2人は来ない) 否定しようとする秀明には、半年以前の記憶がない。 ディッシュとリンは脳を操作することで不老不死を成そうとしていた。 秀明はその唯一の成功例だと言う。 麻酔を打たれ動けなくなる秀明に意識の転送が始まる。 (2人が居なければそのままのっとられBAD) だが、秀明の記憶によって転送は失敗する。 混乱の中秀明を連れ2人は脱出する。 病室。秀明は目覚めない。 ミキが生きていたネタバレ(玩具のナイフ)。 人でない秀明、隆志はミキに問う。 ミキの答えは「秀明は秀明だ」 それを聞き隆志は秀明に声をかける。 ばつが悪そうに起き上がる秀明。 「ただいま、ミキ」 ミキをぎゅっと抱きしめる。 だが、秀明の脳には不死が巣くっている。 それを取り除くまで、秀明に平穏は無い。 以上です。 ノーマル見てないんで補完お願いします。 詳細希望とのことでしたが ミキとの思い出と、サブキャラの話は流石に除外しました 機種かきもらし……携帯のthree 三つの記憶DCです。 残りはおいおい
https://w.atwiki.jp/storytellermirror/pages/931.html
THREE part38-84～86 84 ：three 三つの記憶：2008/04/08(火) 05 47 45 ID 0s0GPXgTO リクにあったので…… 秀明は深夜のホテル街にいた。 手から滑り落ちるナイフ。崩れ落ちる恋人のミキ。 親友の隆志の怯えた視線とOLの悲鳴に秀明は逃げ出した。 何が起きたのか、事態を把握するため秀明は記憶を辿る。 1時間前―秀明はミキを探していた。 バイト先でホテル街に向かった事を聞いた秀明は後を追う。 そこで目にしたのは隆志に抱き寄せられるミキの姿だった。 裏切りの絶望にナイフを振り上げる秀明。 ……何故ナイフなんて持っているんだ? 2時間前―秀明は何故か傷だらけだった。 ミキの路上ライブの情報を得てそこへ向かうと、 そこには手品師がいてミキのおっかけと口論になっていた。 おっかけに圧されて手品師は居なくなる。 追いかければ返せる……秀明はとっさにそれを拾った。 (ロン毛からもナイフは拾える) おっかけにミキのバイト先を聞き、秀明はそこへ。 ……ナイフなんて拾わなければ……ミキを探していただけなのに。 ……何故、ミキを探していたんだ? 3時間前―宮下公園でミキをだきとめる隆志。 再び会う約束をして2人は別れる。 目前の光景に秀明は嫉妬心に包まれる。 が、思い直し2人を信じ話を聞く為後を追った。 ミキを探し輸入服店を訪ねると、店員に声をかけられる。 指摘されるまで気付かなかったⅢという左肩の刺青。 ……何でそんなものが 思考はミキのライブの話に遮られる。 ミキを追う秀明は、ドレッドに因縁をつけられる。 助けてくれたのは見知らぬ白人男性。 病院に行った方がいいと言う彼の言葉に、秀明は自分が病院にいた事を思い出した。 5時間前―気付くと真っ白い病室に寝かされていた。 サイドテーブルに置かれた診断は「短期記憶欠落症」 精神的なショックで3つ以上新しい記憶を持てないという。 リンと名乗る女医が現れ、問う「あなたは最後に何を見たの?」 続きます 85 ：ゲーム好き名無しさん：2008/04/08(火) 05 52 01 ID 0s0GPXgTO 10時間前―気がつくとそこは白い部屋だった。 リンにミキの父親の病院に運び込まれた事を知らされる。 病状の説明を受けているとミキと隆志が見舞いに来た。 花瓶が倒れて水を被り、ミキが、隆志が拭いてくれて、 家に連絡する事を言われた時、秀明の記憶は限界を超える。 状況が分からなくなった秀明を2人は苦しそうに見つめ、 ミキは謝罪を、隆志は励ましを残して去る。 時は経ち、再びリンが訪れ問いかける。 秀明は何も思い出せない。 リンからミキたちが着ていたことを告げられ部屋を飛び出す。 すれ違い様にリンは呟く「S-03……」 気がつくと、秀明はハチ公前にいた。 ポニーテールと話してミキを探していた事を思い出した秀明は、 心配する声を背にミキを追って公園通りへ向かう。 宮下公園で目にするのは裏切りの光景…… ……違う、そうじゃない！ 2人は自分の事を思ってくれていたことを思い出す。 病院に連れていってくれたのもそう……ミキだった。 27時間前―街を彷徨う秀明を見つけた隆志は慌てて電話をかける。 繋がら無い電話に駆け出した隆志を追う。 ミキに告白した時の事を思い出し、 隆志を見つけられないままミキのバイト先へと向かう。 連絡を受けたミキが秀明を見つけるが、そこで倒れ込んでしまう。 心配して声をかけてきた外国人に、ミキもかけつけた隆志も言葉を失う。 ミキが父親の病院に連れて行くと告げると、彼は意味深な言葉を残して去る。 病院に運ばれた秀明に、ミキの父親は困惑した。 保険が効かないと治療をしぶる父親にミキは叫ぶ。 「命がかかってるのに日本人かどうかなんて！」 現在―秀明は窓に映る自分と対峙する。 そこに居るのは金髪碧眼の外国人で。 明滅するイメージ。謎の施設とどこかの校舎。 欠落した記憶を求め、全てを終わらせてミキの後を追うために聞き回る。 謎の蒸発事件、近くにあるというSFS社の研究施設。 老人から得た戦犯の収容所の話。 女将からある小学校の地下では無いかと聞き秀明はそこへ向かう。 不自然に区切られた校舎を抜けると地下に鉄の扉をみつける。 瞬間、後頭部に走る衝撃。 薄れる意識に女性の声を聞く。 もいっちょ続きます 86 ：three 三つの記憶：2008/04/08(火) 06 03 26 ID 0s0GPXgTO ↑タイトル抜けた……すいませんorz 目を覚ますと機械に囲まれた部屋で寝かされていた。 声に目を向けると、それはいつかの白人だった。 秀明の問いかけに彼は自分は君だと答える。 ディッシュ。秀明の基となった人間。 思わず振り払った秀明をだきとめたのはリンだった。 彼女は秀明が13体のうち最後の1人だという。 蘇る記憶。秀明が最後に見たのは己の死体の山に立ちすくむ自分。 秀明の成果にリンは満足したようだ。 連れてこられるミキと隆志。 2人を前に秀明がクローンだと告げる。 (手品師のナイフでなければ2人は来ない) 否定しようとする秀明には、半年以前の記憶がない。 ディッシュとリンは脳を操作することで不老不死を成そうとしていた。 秀明はその唯一の成功例だと言う。 麻酔を打たれ動けなくなる秀明に意識の転送が始まる。 (2人が居なければそのままのっとられBAD) だが、秀明の記憶によって転送は失敗する。 混乱の中秀明を連れ2人は脱出する。 病室。秀明は目覚めない。 ミキが生きていたネタバレ(玩具のナイフ)。 人でない秀明、隆志はミキに問う。 ミキの答えは「秀明は秀明だ」 それを聞き隆志は秀明に声をかける。 ばつが悪そうに起き上がる秀明。 「ただいま、ミキ」 ミキをぎゅっと抱きしめる。 だが、秀明の脳には不死が巣くっている。 それを取り除くまで、秀明に平穏は無い。 以上です。 ノーマル見てないんで補完お願いします。 詳細希望とのことでしたが ミキとの思い出と、サブキャラの話は流石に除外しました 機種かきもらし……携帯のthree 三つの記憶DCです。 残りはおいおい
https://w.atwiki.jp/threejs/pages/70.html
更新日：2013-04-23, r58 説明 THREE.PerspectiveCamera ( fov, aspect, near, far ) 透視投影カメラ。近くのモノは大きく・遠くのモノは小さく、遠近法的に映る。パース。 だいたいこれ使えばおｋ。 パラメータ fov float [= 50] |画角。単位は度。小さいほど望遠（視野狭・遠近感小）、大きいほど広角（視野広・遠近感大）。 aspect float [= 1] |画面アスペクト比。たいてい画面幅÷画面高さで算出。 near float [= 0.1] |この値より手前は描画されない。 far float [= 2000] |この値より奥は描画されない。 例 カメラの作成 var camera = new THREE.PerspectiveCamera( 45, 320/240, 1, 5000 ); // 画角45度、アス比1.{3}、手前1から奥5000までを描画